<template>
  <div class="movie-detail-container">

    <!-- 左侧内容 -->
    <div class="info-container">
      <!-- 上部信息 -->
      <div class="top-section">
        <h1 class="movie-title">{{ title }}</h1>
        <div class="pinyin">{{ pinyin }}</div>
        <div class="meta-tags">
          <el-tag
            v-for="(tag, index) in tags"
            :key="index"
            size="small"
            class="mr-2 mb-2"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <!-- 中部信息 -->
      <div class="middle-section">
        <div class="info-item">
          <span class="info-label">导演：</span>
          <span class="info-content">{{ director }}</span>
        </div>

        <div class="info-item">
          <span class="info-label">主演：</span>
          <span class="info-content cast">{{ cast.join(' / ') }}</span>
        </div>

        <div class="info-item">
          <span class="info-label">年代：</span>
          <span class="info-content">{{ year }}</span>
        </div>

        <div class="info-item">
          <span class="info-label">备注：</span>
          <span class="info-content">{{ remark }}</span>
        </div>

        <div class="info-item plot">
          <span class="info-label">剧情：</span>
          <el-collapse-transition>
            <div>
              <span
                class="info-content"
                :class="{ 'plot-collapse': isPlotCollapsed }"
              >
                {{ plot }}
              </span>
              <el-button
                v-if="showExpand"
                link
                type="primary"
                @click="isPlotCollapsed = !isPlotCollapsed"
              >
                {{ isPlotCollapsed ? '展开全部' : '收起' }}
              </el-button>
            </div>
          </el-collapse-transition>
        </div>
      </div>

      <!-- 下部播放按钮 -->
      <div class="bottom-section">
        <el-button
          type="danger"
          size="large"
          class="play-btn"
          @click="handlePlay"
        >
          立即播放
        </el-button>
      </div>
    </div>

    <!-- 右侧海报 -->
    <div class="poster-container">
      <el-image
        :src="posterUrl"
        fit="cover"
        class="movie-poster"
        :preview-src-list="[posterUrl]"
      />
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  movieId: Number,
  title: String,
  pinyin: String,
  tags: Array,
  director: String,
  cast: Array,
  year: String,
  remark: String,
  plot: String,
  posterUrl: String
})

const isPlotCollapsed = ref(true)
const plotLineHeight = 2 // 允许显示的行数

const showExpand = computed(() => {
  return props.plot.length > 100
})

const handlePlay = () => {
  // 播放逻辑
  router.push(`/movies/play/`+props.movieId)
}
</script>

<style scoped lang="scss">
.movie-detail-container {
  display: flex;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto; /*设置上下外边距为 0，左右外边距为 auto。左右外边距为 auto 时，容器会在父级元素中水平居中对齐。*/
  padding: 20px;
}

.poster-container {
  flex: 0 0 300px;/*flex-grow: 0;表示该容器不会扩展 flex-shrink: 0;表示该容器不会收缩 flex-basis: 400px;表示该容器的基础宽度*/
  .movie-poster {
    width: 100%;
    height: 400px;
    border-radius: 8px;/*圆角*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);/*阴影 水平偏移量 垂直偏移量 模糊半径 颜色*/
  }
}

.info-container {
  flex: 1; /*如果父容器中有多个子元素，且其中一个子元素设置了 flex: 1，那么该子元素会自动扩展以填满剩余的空间。其他未设置 flex 的子元素则保持其原始大小*/
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.movie-title {
  font-size: 32px;
  margin: 0 0 8px 0; /*设置上右下左*/
  color: #333;
}

.pinyin {
  font-size: 16px;
  color: #666;
  margin-bottom: 16px;
}

.meta-tags {
  margin-bottom: 8px;
  .el-tag {
    background-color: #f0f2f5;
    color: #666;
  }
}

.info-item {
  margin-bottom: 5px;
  .info-label {
    color: #666;
    min-width: 60px;
    display: inline-block;
  }
  .info-content {
    color: #333;
    line-height: 1.6;
  }
  &.plot { /* &表示父选择器 ，这里如果不这样写，无法定位到具体剧集对应的info-content*/
    .info-content {
      display: -webkit-box;/*设置多行文本溢出显示省略号,这是一种旧版的 Flexbox 实现，常用于多行文本截断*/
      -webkit-box-orient: vertical;/*设置弹性盒子的方向为垂直方向（从上到下）*/
      overflow: hidden; /*设置溢出部分隐藏*/
      -webkit-line-clamp: v-bind('isPlotCollapsed ? plotLineHeight : "unset"');
      /*是一个非标准的 CSS 属性，用于限制内容显示的行数.v-bind() 是 Vue 3 的模板语法，用于动态绑定 JavaScript 表达式的值。
      设置行数，当 isPlotCollapsed 为 true 时，显示 plotLineHeight 行，否则显示所有行*/
    }
    .el-button {
      padding-left: 0;
      margin-top: 8px;
    }
  }
}

.cast {
  color: #1890ff !important;
}

.play-btn {
  width: 200px;
  height: 50px;
  font-size: 18px;
}

.bottom-section {
  margin-top: auto; /*设置底部外边距为自动,确保按钮在父容器的最下面*/
}

@media (max-width: 768px) {
  .movie-detail-container {
    flex-direction: column;
    padding: 20px;
  }
  .poster-container {
    flex: none;
    .movie-poster {
      height: auto;
    }
  }
}
</style>
